<template>
  <Dialog
    v-model="open"
    :options="{ size: 'xl', position: 'top' }"
  >
    <template #body>
      <div class="flex px-4 py-3 gap-1 items-center border-b">
        <LucideSearch
          class="w-4 mr-1 h-auto"
          name="search"
        />
        <input
          v-model="search"
          type="text"
          class="appearance-none forced-colors:hidden w-full border-none bg-transparent py-3 pl-11.5 pr-4.5 text-base text-ink-gray-8 placeholder-ink-gray-4 focus:ring-0"
          placeholder="Find"
        >
      </div>
      <div
        v-if="searchResults.data?.length"
        class="flex flex-col p-2.5 overflow-y-auto overflow-x-auto max-h-[50vh]"
      >
        <span class="mb-2 pl-1 text-sm text-ink-gray-5">Results for <strong>{{ search }}:</strong></span>
        <div
          v-for="entity in searchResults.data"
          :key="entity.name"
          class="grid grid-flow-col grid-cols-8 gap-2 w-full items-center rounded px-2 py-2 text-base cursor-pointer hover:bg-surface-gray-2"
          @click="openEntity(entity), (open = false)"
        >
          <div class="flex items-center gap-2 w-full col-span-6">
            <img
              class="size-4"
              :src="getIconUrl(entity.is_group ? 'Folder' : entity.file_type)"
            >
            <span class="truncate">{{ entity.title }}</span>
          </div>
          <div
            class="col-span-2 grid grid-flow-col justify-start items-center truncate"
          >
            <Avatar
              :image="entity.user_image"
              :label="entity.full_name || entity.user_name"
              class="relative mr-2"
              size="xs"
            />
            <span class="text-base text-ink-gray-8">{{
              entity.full_name || entity.user_name
            }}</span>
          </div>
        </div>
      </div>
      <div
        v-if="!searchResults.data?.length && search.length"
        class="flex flex-col py-4 px-2.5"
      >
        <span class="pl-2 text-sm text-ink-gray-6">
          <template v-if="search.length > 2">
            No results for <strong>"{{ search }}"</strong>
          </template>
          <span v-else>type more...</span>
        </span>
      </div>
      <div
        v-if="false"
        class="flex flex-col mb-2 mt-4 first:mt-3"
      >
        <span class="mb-1 px-4.5 text-base text-ink-gray-5">Jump to</span>
        <div class="px-2.5">
          <div
            class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-7 hover:bg-surface-gray-2"
            @click="
              $router.push({ name: 'Home' }),
              emitter.emit('showSearchPopup', false)
            "
          >
            <LucideHome class="mr-2 size-4 text-ink-gray-7" />
            Home
          </div>
          <div
            class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-7 hover:bg-surface-gray-2"
            @click="
              $router.push({ name: 'Recents' }),
              emitter.emit('showSearchPopup', false)
            "
          >
            <LucideClock class="mr-2 size-4 text-ink-gray-7" />
            Recents
          </div>
          <div
            class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-7 hover:bg-surface-gray-2"
            @click="
              $router.push({ name: 'Favourites' }),
              emitter.emit('showSearchPopup', false)
            "
          >
            <LucideStar class="mr-2 size-4 text-ink-gray-7" />
            Favourites
          </div>
        </div>
        <span class="mt-3 mb-1 px-4.5 text-base text-ink-gray-5">Actions</span>
        <div class="px-2.5">
          <div
            class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-7 hover:bg-surface-gray-2"
            @click="
              emitter.emit('uploadFile'), emitter.emit('showSearchPopup', false)
            "
          >
            <LucideFilePlus2
              class="stroke-[1.35] mr-2 size-4 text-ink-gray-7"
            />
            Upload File
          </div>
          <div
            class="flex w-full min-w-0 items-center rounded px-2 py-2 text-base font-medium text-ink-gray-7 hover:bg-surface-gray-2"
            @click="
              emitter.emit('uploadFolder'),
              emitter.emit('showSearchPopup', false)
            "
          >
            <LucideFolderPlus
              class="stroke-[1.35] mr-2 size-4 text-ink-gray-7"
            />
            Upload Folder
          </div>
        </div>
      </div>
    </template>
  </Dialog>
</template>
<script setup>
import { Dialog, Avatar, createResource } from "frappe-ui"
import { getIconUrl } from "@/utils/getIconUrl"
import { openEntity } from "@/utils/files"
import { ref, watch } from "vue"
import { useRoute } from "vue-router"

import LucideFilePlus2 from "~icons/lucide/file-plus-2"
import LucideFolderPlus from "~icons/lucide/folder-plus"
import LucideStar from "~icons/lucide/star"

const search = ref("")
const route = useRoute()

const open = defineModel()

const searchResults = createResource({
  auto: false,
  method: "POST",
  url: "drive.api.files.search",
})

watch(search, (val) => {
  if (val.length >= 3) {
    searchResults.submit({
      query: val,
      team: route.params.team,
    })
  } else {
    searchResults.reset()
  }
})
</script>

<style scoped>
input {
  all: unset;
}
input:focus {
  all: unset;
  outline: none;
  border: none;
}
</style>
